<template>
  <div class="addActive">
    <div class="form-left"></div>
    <div class="form-right">
      <a-form-model
        class="group-bargaining-form"
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-model-item label="活动名称" prop="activeName">
          <a-input
            allow-clear
            style="width: 400px"
            v-model="formData.activeName"
            :disabled="readOnly"
            placeholder="输入活动名称，限3-10字"
          />
        </a-form-model-item>
        <a-form-model-item label="活动时间" prop="activeTime">
          <a-date-picker
            allow-clear
            v-model="formData.startDate"
            :disabled-date="disabledStartDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开始时间"
            :disabled="readOnly"
            @change="selectDate('start')"
            @openChange="handleStartOpenChange"
          />
          <span style="margin: 0 4px"> 至 </span>
          <a-date-picker
            allow-clear
            v-model="formData.endDate"
            :disabled-date="disabledEndDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :disabled="readOnly"
            placeholder="请选择结束时间"
            :open="endOpen"
            @change="selectDate('end')"
            @openChange="handleEndOpenChange"
          />
        </a-form-model-item>
        <a-form-model-item label="Tip">
          <div style="color: #999">
            若活动开始时间小于当前时间，最后提交保存的开始时间以最后提交时间为准，活动结束时间必须大于最后提交时间否则创建失败
          </div>
        </a-form-model-item>
        <a-form-model-item label="参与人限制" prop="participant">
          <a-radio-group
            name="participant"
            v-model="formData.participant"
            @change="selectParticipant"
            :disabled="readOnly"
          >
            <a-radio value="0">不限制，所有人可参与 </a-radio>
            <a-radio value="1">部分人参与 </a-radio>
          </a-radio-group>
          <div class="select-box" v-show="formData.participant === '1'">
            <div class="box-item">
              <label class="label">通过权益卡选择</label>
              <div class="select">
                <i
                  >已选择 （{{
                    this.formData.benefitsCardIdList.length || 0
                  }}）</i
                ><span @click="selectPart('1')" v-if="!readOnly">选择</span>
              </div>
            </div>
            <div class="box-item">
              <label class="label">用户标签选择</label>
              <div class="select">
                <i>已选择 （{{ this.formData.labelIdList.length || 0 }}）</i
                ><span @click="selectPart('2')" v-if="!readOnly">选择</span>
              </div>
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="活动类型" prop="activeType">
          <a-radio-group
            name="activeType"
            v-model="formData.activeType"
            @change="selectParticipant"
            :disabled="readOnly"
          >
            <a-radio class="r-item" value="1"
              >无限制抽奖（只要在活动时间内都可以免费抽奖）
            </a-radio>
            <a-radio-group
              class="r-group"
              v-show="formData.activeType === '1'"
              name="unlimited"
              :disabled="readOnly"
              v-model="formData.unlimited"
            >
              <a-radio value="1">无限制 </a-radio>
              <a-radio value="2"
                >每天/每人
                <a-input-number
                  :disabled="formData.unlimited === '1'"
                  v-model="formData.limitedNum"
                  :min="1"
                  :max="1000"
                />
              </a-radio>
              <span style="color: #aaaaaa">输入1-1000以内次数最少1次</span>
            </a-radio-group>
            <a-radio class="r-item" value="3">条件抽奖 </a-radio>
          </a-radio-group>
          <div class="radio-group">
            <a-checkbox-group
              :disabled="readOnly"
              name="conditionalLottery"
              v-show="formData.activeType === '3'"
              v-model="formData.conditionalLottery"
            >
              <div class="flex">
                <a-checkbox class="r-item" value="1">
                  <span class="label">新人专享</span>
                </a-checkbox>
                <span class="title">免费抽奖</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('1') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.freeNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt">次</span>
              </div>
              <div class="flex">
                <a-checkbox class="r-item" value="2">
                  <span class="label">免费抽奖次数</span>
                </a-checkbox>
                <span class="title"></span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('2') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.freeLotteryNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt">次/人/天</span>
              </div>

              <div class="flex">
                <a-checkbox class="r-item" value="3">
                  <span class="label">积分兑换抽奖次数</span>
                </a-checkbox>
                <span class="title"></span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('3') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.integralNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt">积分/次</span>
                <span class="title">兑换次数</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('3') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.exchangeNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt">次/人/天</span>
              </div>
              <!-- <a-checkbox class="r-item" value="3">
                <span class="label">单笔满抽</span>
                <span class="title"></span>
                <a-input-number
                  :disabled="formData.conditionalLottery.indexOf('3') == -1 || readOnly"
                  v-model="formData.conditionalData.priceNum"
                  :min="1"
                  :max="1000"
                />
                <span class="txt">元/次</span>
                <span class="title">购买单数</span>
                <a-input-number
                  :disabled="formData.conditionalLottery.indexOf('3') == -1 || readOnly"
                  v-model="formData.conditionalData.orderNum"
                  :min="1"
                  :max="1000"
                />
                <span class="txt">次/人/天</span>
              </a-checkbox> -->
              <div class="flex">
                <a-checkbox class="r-item" value="4">
                  <span class="label">分享好友获抽奖机会</span>
                </a-checkbox>
                <span class="title"></span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('4') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.shareNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt">次</span>
                <span class="title">分享次数</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('4') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.sharelimitNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt">次/人/天</span>
              </div>

              <!-- <div class="flex">
                <a-checkbox class="r-item" value="5">
                  <span class="label">分享朋友圈</span>
                </a-checkbox>
                <span class="title"></span>
                <a-input-number
                  :disabled="formData.conditionalLottery.indexOf('5') == -1 || readOnly"
                  v-model="formData.conditionalData.friendsNum"
                  :min="1"
                  :max="1000"
                />
                <span class="txt">次</span>
                <span class="title">分享次数</span>
                <a-input-number
                  :disabled="formData.conditionalLottery.indexOf('5') == -1 || readOnly"
                  v-model="formData.conditionalData.limitfriendsNum"
                  :min="1"
                  :max="1000"
                />
                <span class="txt">次/人/天</span>
              </div> -->

              <div class="flex">
                <a-checkbox class="r-item" value="8">
                  <span class="label">单笔满抽</span>
                </a-checkbox>
                <span class="title"></span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('8') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.singleMoney"
                  :min="0.01"
                  :step="0.01"
                  :precision="2"
                />
                <span class="txt" style="width: 30px">元</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('8') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.singleNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt" style="width: 30px">次</span>
                <span class="title">兑换次数</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('8') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.singleLimitNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt" style="width: unset">次/人/天</span>
              </div>

              <div class="flex">
                <a-checkbox class="r-item" value="9">
                  <span class="label">单笔递增满抽</span>
                </a-checkbox>
                <span class="title"></span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('9') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.increaseMoney"
                  :min="0.01"
                  :step="0.01"
                  :precision="2"
                />
                <span class="txt" style="width: 30px">元</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('9') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.increaseNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt" style="width: 30px">次</span>
                <span class="title">兑换次数</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('9') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.increaseLimitNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt" style="width: unset">次/人/天</span>
              </div>
              <div>
                <div class="flex">
                  <a-checkbox class="r-item child" value="6">
                    <span class="label">购买指定商品</span>
                  </a-checkbox>
                  <span class="title"></span>
                  <a-input-number
                    :disabled="
                      formData.conditionalLottery.indexOf('6') == -1 || readOnly
                    "
                    v-model="formData.conditionalData.buyNum"
                    :min="1"
                    :max="1000"
                    :step="1"
                    :precision="0"
                  />
                  <span class="txt">件/次</span>
                  <span class="title">购买件数</span>
                  <a-input-number
                    :disabled="
                      formData.conditionalLottery.indexOf('6') == -1 || readOnly
                    "
                    v-model="formData.conditionalData.limitBuyNum"
                    :min="1"
                    :max="1000"
                    :step="1"
                    :precision="0"
                  />
                  <span class="txt">次/人/天</span>
                </div>
                <a-radio-group
                  class="r-group"
                  :disabled="readOnly"
                  v-show="
                    formData.conditionalLottery.indexOf('6') != -1 || readOnly
                  "
                  name="product"
                  v-model="formData.conditionalData.product"
                >
                  <a-radio value="1" :disabled="readOnly"
                    >商品管理选择
                    <div class="select">
                      <i
                        >已选择 （{{
                          this.formData.goodsIdList.length || 0
                        }}）</i
                      ><span @click="selectPart('3')" v-if="!readOnly"
                        >选择</span
                      >
                    </div>
                  </a-radio>
                  <!-- <a-radio value="2">微页面选择</a-radio> -->
                </a-radio-group>
              </div>

              <div class="flex">
                <a-checkbox class="r-item" value="7">
                  <span class="label">现金兑换</span>
                </a-checkbox>
                <span class="title"></span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('7') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.cashCount"
                  :min="0.01"
                  :step="0.01"
                  :precision="2"
                />
                <span class="txt" style="width: 30px">元</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('7') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.cashNum"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt" style="width: 30px">次</span>
                <span class="title">兑换次数</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('7') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.exchangeCount"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt" style="width: unset">次/人/天</span>
              </div>

              <div class="flex">
                <a-checkbox class="r-item" value="10">
                  <span class="label">口令抽奖</span>
                </a-checkbox>
                <span class="title"></span>
                <div class="rule">
                  <a-input
                    :disabled="
                      formData.conditionalLottery.indexOf('10') == -1 ||
                      (readOnly && passModify)
                    "
                    v-model="formData.conditionalData.password"
                    :min-length="1"
                    :max-length="10"
                    placeholder="请输入1-10字口令名称"
                    style="width: 200px"
                  />
                  <span
                    class="limitWords"
                    v-if="formData.conditionalData.password"
                    >{{
                      formData.conditionalData.password.length || 0
                    }}/10</span
                  >
                  <span class="limitWords" v-else>0/10</span>
                </div>
                <span
                  class="passBox"
                  v-if="
                    !passModify &&
                    formData.conditionalLottery.indexOf('10') > -1
                  "
                  @click="updatePassword"
                  >保存</span
                >
                <span class="title" style="margin-left: 15px">兑换次数</span>
                <a-input-number
                  :disabled="
                    formData.conditionalLottery.indexOf('10') == -1 || readOnly
                  "
                  v-model="formData.conditionalData.passwordNumber"
                  :min="1"
                  :max="1000"
                  :step="1"
                  :precision="0"
                />
                <span class="txt" style="width: unset">次/人</span>
              </div>
            </a-checkbox-group>
          </div>
        </a-form-model-item>
      </a-form-model>
      <!-- <a-button type="primary" @click="look"> Primary </a-button> -->
    </div>
    <!--权益卡弹窗-->
    <entitlement-card
      ref="entitlementCard"
      @comfirmCard="comfirmCard"
      :benefitsCardIdList="formData.benefitsCardIdList"
    ></entitlement-card>
    <!--用户标签弹窗-->
    <user-label
      ref="userLabel"
      :labelIdList="formData.labelIdList"
      @comfirmtagList="comfirmtagList"
    ></user-label>
    <!--商品管理选择 -->
    <product-manage
      ref="productManage"
      @confirmGoodList="confirmGoodList"
      :goodsIdList="formData.goodsIdList"
    ></product-manage>
  </div>
</template>

<script>
import moment from "moment";
import entitlementCard from "@views/menuPage/marketing/lottery/components/creatActive/entitlementCard.vue";
import userLabel from "@views/menuPage/marketing/lottery/components/creatActive/userLabel.vue";
import productManage from "@views/menuPage/marketing/lottery/components/creatActive/productManage.vue";

export default {
  name: "addActive",
  components: {
    entitlementCard,
    userLabel,
    productManage,
  },
  props: {
    formData: {
      type: Object,
      required: true,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    passModify: {
      type: Boolean,
      default: false,
    },
    passwordInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    let validateLiveTime = (rule, value, callback) => {
      if (!this.formData.startDate || !this.formData.endDate) {
        callback(new Error("请选择活动时间段"));
      } else {
        setTimeout(() => {
          if (this.formData.liveTime) {
            this.$refs.ruleForm.validateField("liveTime");
            callback();
          } else {
            callback(new Error("请选择活动时间段"));
          }
        }, 100);
      }
    };
    return {
      confirmLoading: false,
      // formData: {
      //   activeName: "",
      //   activeTime: "",
      //   startDate: "",
      //   endDate: "",
      //   participant: "1",
      //   activeType: "2",
      //   unlimited: "1",
      //   limitedNum: 1,
      //   conditionalLottery: "1",
      //   conditionalData: {
      //     integralNum: 1,
      //     exchangeNum: 1,
      //     freeNum: 1,
      //     priceNum: 1,
      //     orderNum: 1,
      //     shareNum: 1,
      //     friendsNum: 1,
      //     freeLotteryNum: 1,
      //     buyNum: 1,
      //     cashNum: 1,
      //     cashCount: 1,
      //     product: "1",
      //     exchangeCount: 1,
      //   },
      // },
      endOpen: false,
      rules: {
        activeName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 10, message: "活动名称长度在3-10位", trigger: "blur" },
        ],
        activeTime: [{ required: true, message: "请选择活动时间段" }],
        startDate: [
          {
            required: false,
            message: "",
            trigger: "change",
            validator: validateLiveTime,
          },
        ],
        endDate: [
          {
            required: false,
            message: "",
            trigger: "change",
            validator: validateLiveTime,
          },
        ],
      },
      entitlementNum: 0, // 通过权益卡选择
      userLabelNum: 0, // 用户标签选择
      productNum: 0, // 商品管理选择
    };
  },
  methods: {
    // 开始时间不能小于当前时间
    disabledStartDate(current) {
      return current < moment().subtract(1, "days");
    },
    // 结束时间不能小于开始时间
    disabledEndDate(current) {
      return current < moment(this.formData.startDate);
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 选择日期
    selectDate(type) {
      if (this.formData.startDate && this.formData.endDate) {
        this.formData.activeTime =
          this.formData.startDate + "-" + this.formData.endDate;
      } else {
        this.formData.activeTime = "";
      }
      this.$refs.ruleForm.validateField("activeTime");
    },
    // 参与人限制
    selectParticipant() {},
    // 选择
    selectPart(type) {
      if (type === "1") {
        // this.$message.info("通过权益卡选择");
        this.$refs.entitlementCard.visible = true;
      } else if (type === "2") {
        // this.$message.info("用户标签选择");
        this.$refs.userLabel.visible = true;
      } else {
        // this.$message.info("商品管理选择");
        this.$refs.productManage.visible = true;
      }
    },
    comfirmCard(e) {
      this.formData.benefitsCardIdList = e;
    },
    comfirmtagList(e) {
      this.formData.labelIdList = e;
    },
    confirmGoodList(e) {
      this.formData.goodsIdList = e;
    },

    //活动进行中修改口令抽奖
    updatePassword() {
      let params = {
        activityId: this.passwordInfo.activityId,
        conditionLotteryId: this.passwordInfo.id,
        password: this.formData.conditionalData.password,
        number: this.formData.conditionalData.passwordNumber,
      };
      this.comfirmPassword(params);
    },

    //修改口令
    async comfirmPassword(params) {
      let res = await this.$post(
        "goldenhome/gh/lottery/admin_/condition/lottery/password",
        params
      );
      if (res && res.returnCode == 1000) {
        // console.log(res);
        this.$message.success("修改口令成功");
      }
    },
  },
};
</script>

<style scoped lang="less">
.addActive {
  display: flex;
  padding: 20px;
  // .form-left {
  //   width: 221px;
  //   height: 472px;

  //   background-repeat: no-repeat;
  // }
  .form-right {
    // width: calc(100% - 290px);
    width: 100%;
    .select-box {
      .box-item {
        display: flex;
        height: 36px;
        line-height: 36px;
        margin: 10px 0;
        .label {
          width: 100px;
        }
      }
    }
    .select {
      width: 200px;
      box-sizing: border-box;
      border: 1px solid #333333;
      display: flex;
      justify-content: space-between;
      padding-left: 8px;
      margin-left: 15px;
      i {
        font-style: normal;
      }
      span {
        display: inline-block;
        width: 70px;
        text-align: center;
        color: #096dd9;
        cursor: pointer;
      }
    }
    .r-item {
      display: block;
      height: 34px;
      line-height: 36px;
    }
    .r-group {
      display: block;
      padding: 0 24px;
    }
    .radio-group {
      padding: 0 24px;
      .r-item {
        height: 40px;
        line-height: 40px;
        &.child {
          height: auto;
          max-height: 90px;
          .r-group {
            margin-top: 8px;
          }
          .select {
            display: inline-block;
            height: 36px;
            line-height: 36px;
            position: relative;
            span {
              position: absolute;
              right: 0;
            }
          }
        }
      }
      span {
        display: inline-block;
      }
      .label {
        width: 130px;
      }
      .title {
        width: 70px;
      }
      .txt {
        width: 80px;
        margin-left: 3px;
      }
    }
  }
}
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
.flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.passBox {
  // width: 50px;
  // height: 20px;
  margin-left: 5px;
  color: #1890ff;
  font-size: 16px;
  cursor: pointer;
}
.rule {
  position: relative;
  .limitWords {
    position: absolute;
    right: 6px;
    bottom: 7px;
    font-size: 10px;
    color: #ccc;
  }
}
</style>
